<!-- 上传多个文件 -->
<template>
  <div>
    <!-- 隐藏 file input -->
    <input
      type="file"
      ref="fileInput"
      @change="onFileChange"
      style="display: none"
      multiple
    />

    <!-- 进度条组件 -->
    <upload-progress-modal
      v-if="isUploading"
      :isUploading="isUploading"
      :currentFileName="currentFileName"
      :uploadProgress="uploadProgress"
      :selectedFiles="selectedFiles"
    />

    <!-- 超链接触发上传操作 -->
    <a class="dropdown-item" href="#" @click.prevent="triggerFileUpload">
      <i class="bi bi-file-earmark m-1"></i>上传多文件
    </a>
  </div>
</template>

<script>
import axios from "axios";
import UploadProgressModal from "./ProgressBarCompoent.vue"; // 引入进度条组件
import { mapState } from "vuex"; // 引入mapState辅助函数
export default {
  name: "MultipleFileUploadComponent",
  components: {
    UploadProgressModal, // 注册进度条组件
  },
  data() {
    return {
      selectedFiles: [], // 使用数组来存储多个文件
      isUploading: false, // 是否正在上传文件
      currentFileName: "", // 当前正在上传的文件名
      uploadProgress: 0, // 上传进度
      currentFileUploadIndex: 0, // 当前正在上传的文件的索引
      targetFolder: "/", //表示上传文件到根目录（或者为空）
    };
  },
  computed: {
    // 使用mapState辅助函数映射Vuex state到组件的computed属性
    ...mapState(["parentFolderId"]),
  },
  created() {
    // 在组件创建时从Vuex store中获取parentFolderId并赋值给targetFolder
    // 注意这里我们直接在data对象上设置targetFolder，而不是在data中声明它
    this.targetFolder = this.parentFolderId || "/"; // 如果没有parentFolderId，设置默认值为"/"
  },
  methods: {
    triggerFileUpload() {
      // 触发隐藏的 file input 的点击事件
      this.$refs.fileInput.click();
    },
    onFileChange(e) {
      // 获取选中的文件列表并存储在 selectedFiles 中
      this.selectedFiles = Array.from(e.target.files);
      if (this.selectedFiles.length > 0) {
        this.uploadFiles(); // 如果选择了文件，则上传所有文件
      }
    },
    async uploadFiles() {
      if (this.selectedFiles.length === 0) {
        alert("请先选择一个或多个文件。");
        return;
      }
      this.isUploading = true; // 开始上传文件
      while (this.currentFileUploadIndex < this.selectedFiles.length) {
        const file = this.selectedFiles[this.currentFileUploadIndex];
        this.currentFileName = file.name; // 更新当前文件名
        const formData = new FormData();
        formData.append("file", file);
        formData.append("targetFolder", this.targetFolder); // 添加文件上传的目标文件夹信息（为空则表示上传在根目录）
        try {
          await this.uploadFile(formData); // 上传当前文件
          this.currentFileUploadIndex++; // 移动到下一个文件
        } catch (error) {
          alert("文件上传失败");
          this.isUploading = false;
          return;
        }
      }
      this.isUploading = false; // 所有文件上传完毕
      console.info(`${this.selectedFiles.length} 个文件上传成功。`);
      // 清除已选择的文件
      this.selectedFiles = [];
      this.$refs.fileInput.value = null;
      // 刷新页面
      setTimeout(function () {
        //1秒后执行刷新
        window.location.reload();
      }, 1000); //单位是毫秒
    },
    async uploadFile(formData) {
      return new Promise((resolve, reject) => {
        axios
          .post("/api/upload", formData, {
            headers: {
              "Content-Type": "multipart/form-data",
            },
            onUploadProgress: (event) => {
              this.uploadProgress = Math.round(
                (event.loaded / event.total) * 100
              );
            },
          })
          .then((response) => {
            resolve(response.data);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
  },
};
</script>
